import React from 'react';
import { Row, Col, Button } from 'antd';
import QueueAnim from 'rc-queue-anim';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import { getChildrenToRender } from './utils';

class CardSyetem extends React.PureComponent {
  render() {
    const { ...tagProps } = this.props;
    const { dataSource } = tagProps;
    delete tagProps.dataSource;
    delete tagProps.isMobile;
    const animType = {
      queue: 'bottom',
      one: {
        y: '+=300',
        opacity: 0.5,
        type: 'from',
        ease: 'easeOutQuad',
      },
    };
    return (
      <div {...tagProps} {...dataSource.wrapper}>
        <OverPack {...dataSource.OverPack} component={Row}>
          <div {...dataSource.page}>
            <QueueAnim
              key="text"
              type={animType.queue}
              leaveReverse
              ease={['easeOutQuad', 'easeInQuad']}
              {...dataSource.childWrapper}
              componentProps={{
                md: dataSource.childWrapper.md,
                xs: dataSource.childWrapper.xs,
              }}
            >
              {dataSource.childWrapper.children.map(getChildrenToRender)}

            </QueueAnim>
            <QueueAnim
              key="img"
              type={animType.queue}
              animConfig={{ opacity: [0.5, 0], translateY: [0, 300] }}
              leaveReverse
              ease={['easeOutQuad', 'easeInQuad']}
              {...dataSource.childWrapper}
              componentProps={{
                md: dataSource.childWrapper.md,
                xs: dataSource.childWrapper.xs,
              }}
            >
              <div key="img2">
                <img src={dataSource.image.children} width="100%" alt="img" />
              </div>

            </QueueAnim>
          </div>
        </OverPack>

      </div>
    );
  }
}
export default CardSyetem;
